<!--
 * @Descripttion: App参数设置
 * @version: 
 * @Author: 许国辉
 * @Date: 2022-12-01 13:59:28
 * @LastEditors: 许国辉
 * @LastEditTime: 2022-12-03 13:02:43
-->
<template>
  <PageWrapper title="说明">
    <template #headerContent>
      <div class="flex justify-between items-center">
        <span class="flex-1">
          后台管理人员可以通过相应APP参数配置，动态改变应用通知及超标通知提示信息配置。
          配置相关参数时，请确认相关参数要求进行配置。
        </span>
      </div>
    </template>

    <div style="background-color: white; width: 100%; padding: 10px">
      <div>首页App通知信息配置</div>
      <a-divider />
      <a-row>
        <a-col :span="24">
          <div>通知标题</div>
          <a-input
            v-model:value="appNotification.messTitle"
            placeholder="请输入App通知标题"
            allow-clear
          />
        </a-col>
        <a-col :span="24">
          <div>通知内容</div>
          <a-textarea
            v-model:value="appNotification.messContent"
            :rows="4"
            placeholder="请输入App通知的详细内容"
            allow-clear
          />
        </a-col>
      </a-row>
      <div style="height: 10px"></div>
      <a-row>
        <a-col :span="6" />
        <a-col :span="6" />
        <a-col :span="6" />
        <a-col :span="6" style="text-align: right">
          <a-space size="middle">
            <a-button type="primary" @click="updateAppNotification()">提交</a-button>
          </a-space>
        </a-col>
      </a-row>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { message } from 'ant-design-vue';
  import { ref, defineComponent, onMounted } from 'vue';
  import {
    getAppNotificationModelByID,
    updateAppNotificationModel,
  } from '/@/api/sys/appSettingApi/appNotificationAPI';
  import {
    AppNotificationModel,
    defaultAppNotificationModel,
  } from '/@/api/sys/model/appSetting/appNotificationModel';
  import { PageWrapper } from '/@/components/Page';
  export default defineComponent({
    components: { PageWrapper },
    setup() {
      // const appNotificationModel = ref<AppNotificationModel>();
      const value1 = ref<string>('');
      const value2 = ref<string>('');
      const appNotification = ref<AppNotificationModel>(defaultAppNotificationModel);
      const getAppNotification = async () => {
        const data = await getAppNotificationModelByID();
        appNotification.value = data;
      };
      const updateAppNotification = async () => {
        if (appNotification.value.messTitle.length == 0) {
          message.warning({
            content: () => '标题不可以为空',
            class: 'custom-class',
            style: {
              marginTop: '30vh',
            },
          });
        } else if (appNotification.value.messContent.length == 0) {
          message.warning({
            content: () => '通知内容不可以为空',
            class: 'custom-class',
            style: {
              marginTop: '30vh',
            },
          });
        } else {
          appNotification.value.optDate = new Date();
          await updateAppNotificationModel(appNotification.value)
            .then((res) => {
              console.log(res);
              message.success({
                content: () => 'App通知更新成功！',
                class: 'custom-class',
                style: {
                  marginTop: '20vh',
                },
              });
            })
            .catch((err) => {
              message.warning({
                content: () => '数据更新出现问题' + err,
                class: 'custom-class',
                style: {
                  marginTop: '20vh',
                },
              });
            });
        }
      };
      onMounted(() => {
        getAppNotification();
      });
      return {
        appNotification,
        updateAppNotification,
        value1,
        value2,
      };
    },
  });
</script>
